/*
 * @Description: 新增联系人模态框
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-04-06 11:01:36
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-07 16:13:49
 */
import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Select, DatePicker, Modal } from 'antd';
import PubSub from 'pubsub-js';
import {
    // CheckCircleFilled,/*  */
    PlusSquareFilled
} from '@ant-design/icons';

import AddPosition from './addposition';

import './index.css'

const AddClientModal = (props) => {
    let p = props
    // console.log(p);
    const [FormRef2] = Form.useForm()
    const { Option } = Select
    const [sendPosition, setSendPosition] = useState([//定义职位数据
        { id: 0, name: '老板' },
        { id: 1, name: '董事长' },
        { id: 2, name: '总经理' },
        { id: 3, name: '负责人' },
        { id: 4, name: '业务员' },
        { id: 5, name: '技术员' },
        { id: 6, name: '其他2' },
    ])
    // const aaa = useRef()
    //发布tableData数据
    PubSub.subscribe('tableData', (_, data) => {
        // console.log(data);
        setSendPosition([...data])
        console.log('data', data);

    })

    /*****************************************模态框处理函数 */
    /* const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }; */
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = (e) => {
        setIsModalVisible(false);
        e.stopPropagation()
    };
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const handleCancel = (e) => {
        setIsModalVisible(false);
        e.stopPropagation()
    };
    /************************************************* */
    /**新增职位模态框弹窗 */
    function addPosition(e) {
        e.stopPropagation()
        showModal()
        FormRef2.setFieldsValue({
            position: "请选择"
        })
    }
    /***保存新增联系人数据处理 */
    function headleData() {
        let res = FormRef2.getFieldsValue()
        console.log("getFieldsValue", res);
        p.saveHandleCancel(res, emptyData)

    }

    //清空输入数据
    function emptyData() {
        FormRef2.setFieldsValue({
            clientPerson: '',
            sex: '',
            position: '',
            remark: '',
            birthday: '',
            Email: '',
            QQ: '',
            weCat: '',
            tel: '',
        })
    }
    let arr = []
    function addPositionSend(e, data) {
        // console.log("@@##@@#@#", data);
        arr = [{ id: sendPosition.length + 1, name: data }]
    }
    //增加职位处理函数
    function addPositionSendHeadle(e) {
        if (arr.length !== 0) {
            setSendPosition([...sendPosition, ...arr])
        }
        handleCancel(e)
    }
    //change事件,实现子传父
    let time = null
    function changeHeadle() {
        if (time !== null) {
            clearTimeout(time)
        }
        time = setTimeout(() => {
            // console.log("wwwww");
            headleData()
        }, 500);
    }
    useEffect(() => {
        p.saveHandleCancel(FormRef2.getFieldsValue())
    }, []);
    return (
        <div className='addConlient-box'>
            <h3>新增联系人</h3>
            <div className='addConlient-from'>
                <Form name="addConlient" labelCol={{ span: 6, offset: 2 }} wrapperCol={{ span: 8 }} form={FormRef2} onFinish={onFinish}
                    initialValues={{
                        sex: '请选择',
                        position: '请选择'
                    }}
                >
                    <Form.Item label="联系人" rules={[{ required: true, message: '请输入联系人!' }]} name="clientPerson">
                        <Input onChange={changeHeadle} />
                    </Form.Item>
                    <Form.Item label="性别" name="sex">
                        <Select style={{ width: 100 }} onChange={changeHeadle}>
                            <Option value="先生">先生</Option>
                            <Option value="女士">女士</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="职位" wrapperCol={{ span: 15 }}>
                        <Form.Item noStyle name="position" onChange={changeHeadle}>
                            <Select style={{ width: 100 }} >
                                {
                                    sendPosition.map(item => {
                                        return (
                                            <Option value={item.id} key={item.id} >{item.name}</Option>
                                        )
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item noStyle >
                            <span>&nbsp;</span>
                        </Form.Item>
                        <Form.Item noStyle >
                            <Button type='primary' size='small' className='btn-bgc-15' onClick={addPosition}><PlusSquareFilled />新增</Button>
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label="手机号" name="tel" rules={[{ required: true, message: '请输入手机号' },
                    { pattern: /^[0-9]{1,}$/, message: "必须为数字！" },
                    { min: 8, max: 11, message: '不超过11位不少于8位！' }
                    ]}>
                        <Input onChange={changeHeadle} />
                    </Form.Item>
                    <Form.Item label="微信" name="weCat">
                        <Input onChange={changeHeadle} />
                    </Form.Item>
                    <Form.Item label="QQ" name="QQ">
                        <Input onChange={changeHeadle} />
                    </Form.Item>
                    <Form.Item label="电子邮箱" name="Email">
                        <Input onChange={changeHeadle} />
                    </Form.Item>
                    <Form.Item label="生日" name="birthday">
                        <DatePicker onChange={changeHeadle} />
                    </Form.Item>
                    <Form.Item label="备注" wrapperCol={{ span: 15 }} name="remark">
                        <Input.TextArea style={{ marginTop: 10 }} onChange={changeHeadle} />
                    </Form.Item>
                </Form>
                {/* 新增职位模态框 */}
                <Modal title="自定义选项值" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} className='addPosition newAddOrder-box '
                    footer={[
                        <Button key="back" onClick={addPositionSendHeadle} className='btn-bgc-13'>新增</Button>,
                        <Button key="self" onClick={handleCancel} className='btn-bgc-12'> 返回</Button>]}
                >
                    <AddPosition data={{ sendPosition, addPositionSend }} />
                </Modal>
            </div>
        </div>
    );
}

export default AddClientModal;
